import React from 'react'
import {NavBar,WingBlank,WhiteSpace,ActivityIndicator} from 'antd-mobile'
import styles from '../styles/detail.css'

const rootFontSize = getComputedStyle(window.document.documentElement)['font-size'] || window.document.documentElement.currentStyle['font-size']

class BlogDetail extends React.Component{
    constructor(props){
        super(props)

        this.animationCss = {
            position: 'absolute',
            top: '0',
            minHeight: window.innerHeight,
            left: 0,
            right: 0,
            backgroundColor: '#fff',
            wordBreak: 'break-all',
            overflow: 'hidden',
        }
    }

    componentDidMount(){
        this.props.load(this.props.currentDetail.id)

        setTimeout(()=>{
            new IScroll('#detail-scroll',{
                mouseWheel: true,
                scrollbars: true,
                fadeScrollbars: true,
                mouseWheelSpeed: 10,
            })
        },1200)
    }

    render(){
        return(
            <div style={this.animationCss}
            >
                <NavBar onLeftClick={this.props.close} ></NavBar>
                <div id="detail-scroll" style={{ width: '100%', height:window.innerHeight - rootFontSize.substr(0,rootFontSize.length-2) * 0.9,overflow: 'hidden', }} className={styles.detail}>
                    
                        <div>
                            <WhiteSpace />
                            <WingBlank>
                                <div style={{fontSize: '0.35rem', fontWeight: 'bold'}}>{this.props.currentDetail.title}</div>
                            </WingBlank>
                            <WhiteSpace size="lg" />
                            <div>
                                <div style={{position:'absolute'}} >
                                    <WingBlank>
                                        <ActivityIndicator text="加载中..." animating={this.props.detailLoading} />
                                    </WingBlank>
                                </div>
                                <WingBlank>
                                    <div dangerouslySetInnerHTML={{__html: this.props.detailHtml}}></div>
                                </WingBlank>
                            </div>
                        </div>

                </div>
            </div>
        )
    }
}

export default BlogDetail